<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.4.2.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel admin-panel" style="height: 500px">
    <div class="panel-head"><strong class="icon-reorder"> 按学号统计旷课信息</strong></div>
    <div class="padding border-bottom">
        <%--    输入按钮组--%>
        <div class="form-group" >
            <script>
                $(function() {<!--点击查询按钮触发的事件-->
                    var page={start:1,count:10,total:10},totalPages=1;
                    var $tds=$("#table").empty();<!--清空子元素-->
                    $("#table").append("<tr>\n" +
                        "      <th width=\"15%\">学号</th>\n" +
                        "      <th width=\"15%\">姓名</th>\n" +
                        "      <th width=\"15%\">班级</th>\n" +
                        "      <th width=\"15%\">缺课次数</th>\n" +
                        "    </tr>");<!--添加表头-->
                    $.post("/setPageInfo",{idx:1},function (data) {
                    },"json");
                    // 查询数据
                    $.post("/getCensusCount",function (data) {
                        if(data.length==0){
                            $("#table").append("<tr><td colspan='4' align='center'>空</td></tr>");
                        }
                        for(j = 0; j < data.length; j++) {
                            var t="<tr><td>"+data[j].id+"</td><td>"+data[j].name+"</td><td>"+data[j].studentclass;
                            t+="</td><td>"+data[j].count+"</td></tr>";
                            $("#table").append(t);
                            // alert(data[j].id+","+data[j].name+","+data[j].sex+","+data[j].age+","+data[j].studentclass);
                        }

                    },"json");
                    // 查询页面信息
                    $.post("/getPageInfo",function (data) {
                        page=data;
                        if(page.total%page.count==0){
                            totalPages=page.total/page.count;
                        }else{
                            totalPages=page.total/page.count+1;
                        }
                        if(totalPages==0){//当不满一页时
                            totalPages=1;
                        }
                    },"json");
                });
            </script>
            <%--      <div style="width: 1080px;height: 20px"></div><!--用来填充-->--%>
        </div>
    </div>
    <table class="table table-hover text-center" id="table">
        <tr>
            <th width="15%">学号</th>
            <th width="15%">姓名</th>
            <th width="15%">班级</th>
            <th width="15%">缺课次数</th>
        </tr>

    </table>
</div>
<%--分页技术--%>
<ul class="pagination pagination-lg" style="margin-left: 40%;">
    <li><a href="javascript:getPNData(-1)" >&laquo;</a></li>
    <li><a href="javascript:getData($('#idx1').html());" id="idx1" class="pages">1</a></li>
    <li><a href="javascript:getData($('#idx2').html());" id="idx2" class="pages">2</a></li>
    <li><a href="javascript:getData($('#idx3').html());" id="idx3" class="pages">3</a></li>
    <li><a href="javascript:getData($('#idx4').html());" id="idx4" class="pages">4</a></li>
    <li><a href="javascript:getData($('#idx5').html());" id="idx5" class="pages">5</a></li>
    <li><a href="javascript:getData($('#idx6').html());" id="idx6" class="pages">6</a></li>
    <li><a href="javascript:getPNData(1)">&raquo;</a></li>
</ul>
<script>
    // 获取指定页的数据
    function getData(idx) {
        //更改页面设置
        $.post(" /setPageInfo",{idx:idx},function (data) {
        },"json");
        //查询所在页面信息
        var $tds=$("#table").empty();<!--清空子元素-->
        $("#table").append("<tr>\n" +
            "      <th width=\"15%\">学号</th>\n" +
            "      <th width=\"15%\">姓名</th>\n" +
            "      <th width=\"15%\">班级</th>\n" +
            "      <th width=\"15%\">缺课次数</th>\n" +
            "    </tr>");<!--添加表头-->
        // 查询数据
        setTimeout(function () {
            $.post("/getCensusCount",function (data) {
                if(data.length==0){
                    $("#table").append("<tr><td colspan='4' align='center'>空</td></tr>");
                }
                for(j = 0; j < data.length; j++) {
                    var t="<tr><td>"+data[j].id+"</td><td>"+data[j].name+"</td><td>"+data[j].studentclass;
                    t+="</td><td>"+data[j].count+"</td></tr>";
                    $("#table").append(t);
                    // alert(data[j].id+","+data[j].name+","+data[j].sex+","+data[j].age+","+data[j].studentclass);
                }

            },"json");
        }, 200);
    }
    // 获取上一页或下一页的数据
    function getPNData(step) {
        if(step==-1){
            if ($("#idx1").text()!=1){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text($("#idx"+j).text()-1);
                }
            }
        }else{
            if ($("#idx6").text()!= totalPages){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text(Number.parseInt($("#idx"+j).text())+step);
                }
            }
        }


    }
</script>
</div>
</body></html>
